<template>
  <div>
    <el-card>
      <el-form :inline="true"
               :model="formInline"
               class="demo-form-inline">
        <el-form-item label="商户ID：">
          <el-input v-model="formInline.user"
                    size="mini"></el-input>
        </el-form-item>
        <div class="block">
          <span class="date">下单日期：</span>
          <el-date-picker v-model="formInline.date"
                          size="mini"
                          type="monthrange"
                          range-separator="至"
                          start-placeholder="开始月份"
                          end-placeholder="结束月份">
          </el-date-picker>
        </div>
        <el-form-item label="行业："
                      class="hangye">
          <el-select v-model="formInline.region"
                     placeholder="行业"
                     size="mini"
                     @change="industryed">
            <el-option label="便利百货"
                       value="便利百货"></el-option>
            <el-option label="五金杂货"
                       value="五金杂货"></el-option>
            <el-option label="电器家居"
                       value="电器家居"></el-option>
            <el-option label="零食商品"
                       value="零食商品"></el-option>
            <el-option label="男人的加油站"
                       value="男人的加油站"></el-option>
            <el-option label="女人的美容院"
                       value="女人的美容院"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="btn">
          <el-button type="primary"
                     @click="onSubmit">查询</el-button>
          <el-button type="primary"
                     @click="inSubmit">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <div class="two">
      <span class="num">订单数量：{{all.allddtotal}}</span>
      <span>订单总金额: {{all.allprice}}</span>
    </div>
    <div class="four">
      <span>退款/售后订单数量:{{all.allrefunds}}</span>
      <span>退款/售后率：{{all.allnewnum}}</span>
      <span>确认退款订单数量：{{all.allrefundnum}}</span>
      <span>确认退款率：{{all.allnewis}} </span>
    </div>
    <el-table :data="tableData">
      <el-table-column prop="product_id"
                       label="商户ID"
                       align="center"
                       width="100px"></el-table-column>
      <el-table-column align="center"
                       prop="shopname"
                       label="商户名称"></el-table-column>
      <el-table-column align="center"
                       prop="industryed"
                       label="行业"></el-table-column>
      <el-table-column align="center"
                       prop="ddtotal"
                       label="订单总数量"></el-table-column>
      <el-table-column align="center"
                       prop="price"
                       label="订单总金额"></el-table-column>
      <el-table-column align="center"
                       prop="refunds"
                       label="退款/售后订单数量"></el-table-column>
      <el-table-column align="center"
                       prop="newnum"
                       label="退款/售后率"></el-table-column>
      <el-table-column align="center"
                       prop="refundnum"
                       label="确认退款订单数量"></el-table-column>
      <el-table-column align="center"
                       prop="newrefund"
                       label="确认退款金额"></el-table-column>
      <el-table-column align="center"
                       prop="newis"
                       label="确认退款率">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import '@/mock/mock.js'
export default {
  props: {

  },
  components: {

  },
  data () {
    return {
      formInline: {
        user: '',
        region: '',
        date: '',
        num: '',
        pickerOptions: {
          shortcuts: [{
            text: '本月',
            onClick (picker) {
              picker.$emit('pick', [new Date(), new Date()])
            }
          }, {
            text: '今年至今',
            onClick (picker) {
              const end = new Date()
              const start = new Date(new Date().getFullYear(), 0)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近六个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setMonth(start.getMonth() - 6)
              picker.$emit('pick', [start, end])
            }
          }]
        }
      },
      tableData: [],
      tableData1: [],
      list: [],
      all: {
        allddtotal: 0,
        allprice: 0,
        allrefunds: 0,
        allnewnum: 0,
        allrefundnum: 0,
        allnewis: 0
      }
    }
  },
  created () {
    this.getShopList()
  },
  methods: {
    async getShopList () {
      const { data } = await this.$http.get('/product')
      this.tableData = data.list
      this.tableData1 = data.list

      data.list.forEach((item, index) => {
        item.newnum = item.num + '%'
        item.newis = item.is + '%'
        item.newrefund = item.isrefund + '元'
        this.all.allddtotal += item.ddtotal
        this.all.allprice += item.price
        this.all.allrefunds += item.refunds
        this.all.allnewnum += item.num
        this.all.allrefundnum += item.refundnum
        this.all.allnewis += item.is
      })
      this.all.allnewis /= 5
      this.all.allnewis += '%'
      this.all.allnewnum /= 5
      this.all.allnewnum += '%'
    },
    look () {
      this.$router.push('/lookorder')
    },
    inSubmit () {
      console.log(this.tableData1)
      this.formInline.user = ''
      this.formInline.region = ''
      this.formInline.date = ''
      this.tableData = this.tableData1
    },
    // 查询
    onSubmit () {
      this.list = this.list1
      const arr = []
      this.tableData.forEach((item, index) => {
        if (item.product_id === this.formInline.user * 1 || item.shopname === this.formInline.user) {
          arr.push(item)
          this.tableData = arr
        }
      })
    },
    industryed () {
      this.tableData = this.tableData1
      if (this.formInline.region === '行业') {
        this.tableData = this.tableData1
        return false
      }
      const arr = []
      this.tableData.forEach((item, index) => {
        if (this.formInline.region === item.industryed) {
          arr.push(item)
        }
      })
      this.tableData = arr
    }
  }
}

</script>

<style lang="less" scoped>
.block {
  font-size: 14px;
  display: inline-block;
  margin-top: 5px;
  margin-left: 50px;
}
.hangye {
  margin-left: 50px;
}
.btn {
  margin-top: 80px;
}
.four {
  float: right;
  span {
    margin: 0px 20px;
  }
}
.two {
  float: left;
}
.num {
  margin: 0px 25px;
}
.is-always-shadow {
  margin-bottom: 20px;
}
</style>
